<template>
  <div class="login">
    <van-swipe class="my-swipe">
      <van-swipe-item
        v-for="(image,index) in images"
        :key="index"
      >
        <img :src="image" />
      </van-swipe-item>

    </van-swipe>
    <van-cell-group inset>
      <van-field
        v-model="state.username"
        label="用户名"
        placeholder="请输入用户名"
      />

      <van-field
        v-model="state.password"
        type="password"
        label="密码"
        placeholder="请输入密码"
      />
    </van-cell-group>
    <van-button
      type="primary"
      @click="confirm"
    >确定</van-button>
    <van-button type="warning " @click="clear">清除</van-button>
  </div>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance,reactive } from "vue";

export default defineComponent({
  name: "login",
  setup() {
    const {proxy }:any=getCurrentInstance();
    const images = reactive([
      "https://tse1-mm.cn.bing.net/th/id/R-C.a2cc8f34c0dd82910341f604de610981?rik=Fr8W99R4%2bVnM1w&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20161101%2f82053d6983413172e69c6dc5e6d5b3bf.jpg&ehk=QtvCSHc%2bnzhp9M1HmNW36HcFl5WvkJcS8dFDAv0QT%2f0%3d&risl=&pid=ImgRaw&r=0",
      "https://tse1-mm.cn.bing.net/th/id/R-C.c7c26907e13249f608758e3ad783a589?rik=X0rcFxlyPsZPUg&riu=http%3a%2f%2fpic.netbian.com%2fuploads%2fallimg%2f160710%2f100239-1468116159ada1.jpg&ehk=o3Re0DhxE0jIH%2bB0xGzArkNeOdGMvOG%2fbQjbiT8UaAs%3d&risl=&pid=ImgRaw&r=0",
      "https://tse1-mm.cn.bing.net/th/id/R-C.15a1ba773a211acdeae39f83c2c13241?rik=h1wkOstFSHzvTg&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170120%2ffdf948c82074494a74bf258eed4f855d.jpg&ehk=fYrgVtm0hD0sZn455mcVyf5k%2bQz7RScjHLMyUi6jG0A%3d&risl=&pid=ImgRaw&r=0"
    ]);

    const state=reactive({
        username:'',
        password:''
    });

   function confirm(){
       if(state.username==''||state.password==''){
           proxy.$toast.success("用户信息不能为空");
       }
       else{
        get();
       } 
   }
  function clear(){
      state.username='';
      state.password='';
  }
    function get(){
        proxy.$http.get('https://www.fastmock.site/mock/9b6c5c2a182a05f0af8a1abee6b58f61/api/loginVerify',{params:{username:state.username,password:state.password}})
        .then(res=>{
            console.log('outside',res.data);
            if(res.data.data.code==="1"){
                proxy.$toast.success('登录成功');
                window.sessionStorage.setItem('token',state.username);
                proxy.$router.replace('/home');
            }else  if(res.data.data.code==="-1"){
                proxy.$toast.fail('密码或用户名错误');
            }else{
                proxy.Toast.success('登录失败');
            }
        }).catch(err=>{
            console.log(err);
        })
    }
   
    return {
      images,
      state,
    confirm,
    clear
    }
  },
})
</script>
<style lang='scss' scoped>
img {
  width: 100%;
  height: 150px;
}
</style>